<template>
  <div class="box">
    <el-table v-loading="loading" ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%" @row-click="clickFn" @row-dblclick="dblclickFn">
      <el-table-column width="55">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.checked"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column v-for="(th,index) in tableTh" :key="index" :prop="th.name" :label="th.label"></el-table-column>
      <!-- <el-table-column label="日期" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>-->
    </el-table>
    <detail :show="showDetail" :person="selectRow" @close="showDetail = false" />
    <!-- <key-person-detail :show="showDetail" :person="selectRow"  @close="showDetail = false"/> -->
  </div>
</template>
<script>
import detail from './detail/';
export default {
  name: 'keyPersonList',
  props: ['dataList'],
  components: {
    detail
  },
  data() {
    return {
      showDetail: false,
      tableTh: [
        { name: 'name', label: '状态' },
        { name: 'xzdXzqh', label: '现住地区' },
        { name: 'zdrylbbj', label: '人员大类' },
        { name: 'zdrylbbj', label: '人员细类' },
        { name: 'xxm', label: '姓名' },
        { name: 'gmsfhm', label: '身份证号码' },
        { name: 'gj', label: '国籍' },
        { name: 'mz', label: '民族' },
        { name: 'xb', label: '性别' },
        { name: 'zjlasj', label: '最近立案日期' },
        { name: 'ladw', label: '最近立案单位' }
      ],
      timer: '',
      selectRow: ''
    };
  },
  methods: {
    dblclickFn(row, event) {
      console.log('dbclick');
      console.log(row);
      this.selectRow = row;
      this.showDetail = true;
    },
    clickFn(row, event) {

      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
        console.warn('取消');
        return;
      }
      this.timer = setTimeout(() => {
        this.timer = null;
        this.dataList.forEach(item => {
          if (item.checked === true && item.name !== row.name) {
            item.checked = false;
          }
        });
        if (row.checked === true) {
          row.checked = false;
          this.selectRow = null;
        } else {
          row.checked = true;
          this.selectRow = row;
        }
      }, 200);
    }
  }
};

</script>
<style lang="scss" scoped>
.box {
  .el-table {

    th,
    tr {
      background-color: #212e3e !important;
    }
  }
}

</style>
